import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, TouchableHighlight, Dimensions, LayoutAnimation } from 'react-native';
import FirstButton from '../commonComponent/button';
import { InsuranceShopData } from '../../mockData/mockData';

const btnData = InsuranceShopData.result.flagship_insurance_store_category.data;

const _windows = Dimensions.get('window');

class WrapButtonCard extends Component {
    constructor(props) {
        super(props);
        this.onPressButton = this.onPressButton.bind(this);
    }

    onPressButton (index){
        if (this.props.clickAction){
            this.props.clickAction(index);
        }
    }

    _showButton(data){
        if (data && data.length ){
            let list = data.map((p, i)=>{
                const {title='', select=false } = p;
               return(<FirstButton key={'btnTag'+i}  title={title} index={i} select={select} clickAction={this.onPressButton}/>);
            });
            return (<View style={styles.container}>
                    { list }
                    </View>
            );
        }
        return (<View/>);
    }

    render(){
        return (
            <View>
                {this._showButton(btnData)}
                <View style={{width:60 }}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        flexWrap:'wrap',
        backgroundColor: '#2D4486',
        alignItems: 'center',
        paddingTop:10
    }
});

export default WrapButtonCard ;